<template>
    <div>
      <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <!-- <i class="el-icon-arrow-left"></i> -->
          <span>{{dialogData.title}}</span>
        </div>
        <el-row style="width:1120px;padding-bottom:150px;height:100%;overflow-y:auto">
          <el-col :span="22">
             <el-form :model="parames" :rules="rules" label-position="left" ref="parames" label-width="110px" class="addForm">
                <el-row style="padding: 0 40px;" :gutter="30">
                  <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    <a-collapse-panel class="marginB10" header="基本信息" key="1">
                      <el-col :span="12" style="margin-top:14px">
                          <el-form-item label="服务商全称:" prop="providerName">
                            <el-input size="small" v-model="parames.providerName" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12" style="margin-top:14px">
                          <el-form-item label="简称:">
                            <el-input size="small" v-model="parames.shortName" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="服务区域:" prop="serviceArea">
                            <a-tree-select
                              showSearch
                              allowClear
                              multiple
                              treeCheckable
                              showCheckedStrategy='SHOW_PARENT'
                              style="width: 100%"
                              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                              :treeData="treeData"
                              treeNodeFilterProp="title"
                              placeholder="请选择服务区域"
                              v-model="parames.serviceArea"
                            >
                            </a-tree-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="服务热线:" prop="serviceHotline">
                            <el-input size="small" v-model="parames.serviceHotline" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系人姓名:" prop="contactName">
                            <el-input size="small" v-model="parames.contactName" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系人手机:" prop="contactMobile">
                            <el-input size="small" v-model="parames.contactMobile" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系人角色:" prop="contactRole">
                            <el-select style="width:100%" size="small" v-model="parames.contactRole" placeholder="请选择">
                              <el-option v-for="(item,index) in contactRole" :key="index" :label="item.desc" :value="item.name"></el-option>
                            </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="经营区域:">
                            <el-cascader
                            style="width:100%"
                            size="small"
                            :options="options"
                            v-model="parames.businessArea"
                            >
                            </el-cascader>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="经营地址:">
                            <el-input size="small" v-model="parames.businessServiceArea" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="业务咨询电话:">
                            <el-input size="small" v-model="parames.consultingTelephone" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="营业执照:">
                            <!-- <a-upload name="file" :action="fileAction" :multiple="true" :fileList="fileList" @change="handleFileChange">
                              <a-button>
                                <a-icon type="upload" /> 上传图片
                              </a-button>
                            </a-upload> -->
                            <el-upload
                              class="upload-demo"
                              multiple
                              :headers="myHeaders"
                              :on-preview="downFile"
                              :action="fileAction"
                              :on-success="handleSucess"
                              :on-remove="handleRemove"
                              :file-list="fileList">
                              <el-button icon="el-icon-upload2" style="width:350px" size="small" type="primary" plain>上传图片</el-button>
                            </el-upload>
                          </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="需求概述:">
                          <el-input size="small" type="textarea" v-model="parames.providerIntroduction" placeholder="请输入需求概述"></el-input>
                        </el-form-item>
                      </el-col>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="收款账号信息" key="2">
                      <el-col :span="24">
                        <el-table
                          :data="parames.providerAccountList"
                          style="width: 100%">
                          <el-table-column
                            prop="accountType"
                            label="账户类型"
                            width="180">
                            <template slot-scope="scope">
                                <p>{{scope.row.accountType == 'BANK'?'银行账户':''}}</p>
                                <p>{{scope.row.accountType == 'ALIPAY'?'支付宝账户':''}}</p>
                                <p>{{scope.row.accountType == 'WE_CHAT'?'微信账户':''}}</p>
                                <p>{{scope.row.accountType == 'CASH'?'现金账户':''}}</p>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="银行/支付宝/微信账号">
                            <template slot-scope="scope">
                                <p>{{scope.row.accountNumber}}</p>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="accountName"
                            label="真实姓名/支付宝名称/微信昵称">
                          </el-table-column>
                          <el-table-column
                            prop="depositBank"
                            label="开户行">
                            <template slot-scope="scope">
                                <p>{{scope.row.depositBank !=''?scope.row.depositBank:'无'}}</p>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            width="70"
                            label="操作">
                            <template slot-scope="scope">
                                <a-popconfirm
                                  title="是否确认删除?"
                                  @confirm="handleCanleAccount(scope.$index,scope.row)"
                                  okText="是"
                                  cancelText="否"
                                >
                                  <el-button size="mini" type="text" icon="el-icon-delete"></el-button>
                                </a-popconfirm>
                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditAccount(scope.$index,scope.row)"></el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-button icon="el-icon-plus" size="small" style="width:100%;margin-top:20px" @click="handleAddAccount">添加账号</el-button>
                      </el-col>
                    </a-collapse-panel>
                  </a-collapse>
                </el-row>
              </el-form>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-drawer>
      <addAccountDialog :addAccountData="addAccountData" @addAccount="addAccount" @checkRender="checkRender"></addAccountDialog>

    </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

import addAccountDialog from "./accountDialog.vue" //添加账户
export default {
    props: ['dialogData'],
    data() {
        return {
          treeData: regionData,
          options: regionData,
          loadingBtn: false,
          activeNames: ['1','2'],
          file: [],
          fileList:[],
          fileAction: this.$api.postProviderUploadLicense,
          parames: {
            id: '',
            providerName: '', //服务商名称
            shortName: '', //简称
            serviceArea: [], //服务区域
            serviceHotline: '', //服务热线
            contactName: '', //联系人姓名
            contactMobile: '', //联系人手机
            contactRole: '', //角色
            businessArea: [], //经营区域
            businessServiceArea: '',//经营地址
            consultingTelephone: '',//业务咨询电话
            attachmentSet: [], //营业执照（URL上传地址
            providerIntroduction: '', //服务商简介
            providerAccountList: [] //账户信息
          },
          myHeaders: {authorization: ''},
          addAccountData: { //账户弹窗
            providerId: '', //服务商id
            title: '',
            id: '', //客户人员id
            type: '',
            data: {},
            show: false
          },
          rules: {
            providerName: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            serviceArea: [{ required: true, message: '必填', trigger: ['blur' ]}],
            contactName: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            contactMobile: [{ required: true, message: '必填', trigger: ['blur']}],
            contactRole: [{ required: true, message: '必填', trigger: ['blur']}]
          },
          contactRole: [], //角色信息
        };
    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      downFile (file) { //附件下载
        window.location.href = this.$api.postProviderDownloadLicense+'?url=' + file.url +'&name='+ file.name
      },
      handleDelproduct (index,row) { //删除当前行产品
        this.parames.contractProductList.splice(index,1)
      },
      handleSucess (response,fileList) { //上传附件成功返回url
        this.fileList.push({
            name: response.data.name,
            url: response.data.url
        })
      },
      handleRemove (file) { //删除附件更新
          this.fileList.forEach((el,index)=>{
              if (file.response) {
                  if (el.url == file.response.data.url) {
                      this.fileList.splice(index, 1)
                  }
              } else {
                  if (el == file.url) {
                      this.fileList.splice(index, 1)
                  }
              }
          })
      },
      handleCancle () { //取消重新编辑
        this.dialogData.show = false
        this.$emit('checkOpen')
      },
      handleDelproduct (index,row) { //删除当前行产品
        this.parames.opportunityProductList.splice(index,1)
      },
      addAccount (value,type,index) { //新建时-新增账户回调
        if (type == 'new') {
          this.parames.providerAccountList.push(JSON.parse(value))
        } else if (type == 'newEdit') { //新建时-修改人员信息
          this.parames.providerAccountList.splice(index,1,JSON.parse(value))
        }
      },
      handleAddAccount () { //添加账户信息
        this.addAccountData.title = '新增账户'
        this.addAccountData.index = ''
        if (this.dialogData.type == 'new') {
          this.addAccountData.type = 'new'
        } else if (this.dialogData.type == 'edit') {
          this.addAccountData.type = 'saveNew'
          this.addAccountData.id = this.dialogData.id
        }
        this.addAccountData.data = []
        this.addAccountData.show = true
      },
      handleEditAccount (index,row) { //修改
        this.addAccountData.title = '修改文件信息'
        this.addAccountData.index = index
        if (this.dialogData.type == 'new') {
          this.addAccountData.type = 'newEdit'
        } else if (this.dialogData.type == 'edit') {
          this.addAccountData.type = 'saveEdit'
        }
        this.addAccountData.data = JSON.stringify(row)
        this.addAccountData.show = true
      },
      handleCanleAccount (index,row) { //删除添加的账户
        if (this.dialogData.type == 'new') {
          this.parames.providerAccountList.splice(index,1)
        } else if (this.dialogData.type == 'edit') {
          this.$post(this.$api.postProviderDel,{
            providerAccountId: row.id
          }).then(response => {
            if (response.data.succeed) {
              this.render()
            }
          })
        }
      },
      checkRender () {
        this.render()
      },
      setData () { //处理数据
        this.parames.attachmentSet = this.fileList
      },
      handleSave () { //保存服务商信息
        this.$refs['parames'].validate((valid) => {
          this.setData()
          if (valid) {
            this.loadingBtn = true
            if (this.dialogData.type == 'edit') { //修改保存成功
              this.$post(this.$api.postProviderEdit,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }
              })
            } else { //新增
              this.$post(this.$api.postProviderAdd,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '保存成功'})
                  this.$emit('checkRender')
                  this.handleClose()
                }
              })
            }
            setTimeout(() => {
              this.loadingBtn = false
            }, 300);
          }
        })
      },

      render () { //获取详情信息
        this.loading = true
        this.$post(this.$api.postProviderFind,{
          providerId: this.dialogData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.providerName = data.providerName //服务商名称
            this.parames.shortName = data.providerName //简称
            this.parames.serviceArea = data.serviceArea //服务区域
            this.parames.serviceHotline = data.serviceHotline //服务热线
            this.parames.contactName = data.contactName //联系人姓名
            this.parames.contactMobile = data.contactMobile //联系人手机
            this.parames.businessArea = data.businessArea //经营区域
            this.parames.businessServiceArea = data.businessServiceArea //经营地址
            this.parames.consultingTelephone = data.consultingTelephone//业务咨询电话
            this.parames.providerIntroduction = data.providerIntroduction //服务商简介
            this.parames.attachmentSet = data.attachmentSet
            this.fileList = data.attachmentSet
            data.attachmentSet.forEach(el=>{
                this.file.push({
                    name: el.name,
                    url: el.url
                })
            })
            data.providerAccountList.forEach(el=>{
              el.accountType = el.accountType.name
            })
            this.parames.providerAccountList = data.providerAccountList //账户信息
            if (data.contactRole) {
              this.parames.contactRole = data.contactRole.name //紧急程度
            }
            if (data.importanceLabel) {
              this.parames.importanceLabel = data.importanceLabel.name //重要程度
            }
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.file = []
        this.fileList = []
        this.parames.attachmentSet = []
        this.parames.providerName = '' //服务商名称
        this.parames.shortName = '' //简称
        this.parames.serviceArea = [] //服务区域
        this.parames.serviceHotline = '' //服务热线
        this.parames.contactName = '' //联系人姓名
        this.parames.contactMobile = '' //联系人手机
        this.parames.contactRole = '' //角色
        this.parames.businessArea = [] //经营区域
        this.parames.businessServiceArea = ''//经营地址
        this.parames.consultingTelephone = ''//业务咨询电话
        this.parames.providerIntroduction = '' //服务商简介
        this.parames.providerAccountList = [] //账户信息
        this.$refs.parames.resetFields()
      }
    },
    components: {
      addAccountDialog
    },
    computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
            this.$utils.getEnumberation('postProviderContactRole','contactRole',this) //获取联系人信息
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style scoped>

</style>
